<template>
    <!-- pages/collectioncode/bindcard/identity/index.wxml -->
    <view>
        <view class="page">
            <view class="text">为了保障您的账户安全及信息无误，系统发送了短信验证码到当前商户号绑定的手机号码{{ mobile }}</view>
        </view>
        <van-cell-group class="mt-50">
            <van-field v-model="code" center clearable label="验证码" placeholder="请输入验证码" maxlength="6" :border="false" use-button-slot>
                <view v-if="btnvisible == true" class="codebtn" slot="button" @tap.stop.prevent="getCode">获取验证码</view>
                <button v-if="btnvisible == false" class="codebtn" slot="button" @tap.stop.prevent="getCode" :disabled="true">{{ count_down }}秒</button>
            </van-field>
        </van-cell-group>
        <view class="btn" @tap.stop.prevent="onNext">下一步</view>
    </view>
</template>

<script>
// pages/collectioncode/bindcard/identity/index.js
const app = getApp(); // 引入app

const _request = require('../../../../utils/request.js'); // 引入require;

export default {
    data() {
        return {
            incomingInfo: null,

            // 进件对象
            btnvisible: true,

            count_down: 60,
            code: '',
            mobile: uni.getStorageSync('user').mobile,
            timer: ''
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad(options) {
        this.setData({
            mobile: uni.getStorageSync('user').mobile
        }); // 获取进件（盒子商户）信息

        _request
            .get('/box/getIncoming', {
                storeId: uni.getStorageSync('storeId')
            })
            .then((res) => {
                if (res.data.code === 200) {
                    const data = res.data.data;
                    this.setData({
                        incomingInfo: data
                    });
                }
            });
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady() {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {},
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide() {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload() {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh() {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom() {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage() {},
    methods: {
        // 下一步
        onNext() {
            uni.navigateTo({
                url: '/pages/collectioncode/bindcard/edit/index'
            });

            if (!this.code) {
                uni.showToast({
                    title: '请输入验证码',
                    icon: 'none',
                    duration: 2000
                });
                return;
            }

            _request
                .postObj('/storeSms/phoneCodeCheck', {
                    userId: uni.getStorageSync('userid'),
                    mobile: this.mobile,
                    type: 20,
                    phoneCode: this.code
                })
                .then((res) => {
                    if (res.data.code === 200) {
                        uni.navigateTo({
                            url: '/pages/collectioncode/bindcard/edit/index'
                        });
                    } else {
                        uni.showToast({
                            title: res.data.message || '验证失败!',
                            icon: 'error'
                        });
                    }
                })
                .catch((error) => {
                    console.log(error, 'error');
                });
        },

        // 获取验证码
        getCode() {
            //type: 20 检验修改收款卡商户手机号
            _request
                .postObj('/storeSms/getPhoneCode', {
                    mobile: this.mobile,
                    type: 20,
                    userId: uni.getStorageSync('userid')
                })
                .then((res) => {
                    if (res.data.code === 200) {
                        this.get_code_settime();
                    } else if (res.data.code === 408) {
                        uni.showModal({
                            title: '提示',
                            content: res.data.message,
                            confirmText: '我知道了',
                            showCancel: false
                        });
                    } else {
                        uni.showToast({
                            title: res.data.message,
                            icon: 'none',
                            duration: 1000
                        });
                    }
                })
                .catch((error) => {
                    console.log(error, 'error');
                });
        },

        //验证码按钮倒计时方法
        get_code_settime(that) {
            var that = this;
            let countDown = that.data.count_down; //获取倒计时初始值

            that.setData({
                //这里把setInterval复制给变量名timer
                timer: setInterval(function () {
                    // 每隔一秒减1
                    countDown--;
                    that.setData({
                        btnvisible: false,
                        //此处用于隐藏验证码点击按钮，使倒计时显示
                        count_down: countDown //倒计时计数
                    }); //当计数为0时，清空定时器，使验证码按钮再次显示

                    if (countDown == 0) {
                        clearInterval(that.data.timer); //清除timer，

                        that.setData({
                            btnvisible: true,
                            count_down: '60'
                        });
                    }
                }, 1000)
            });
        }
    }
};
</script>
<style>
/* pages/collectioncode/bindcard/identity/index.wxss */
.page {
    padding: 30rpx;
}

.text {
    font-size: 28rpx;
}

.btn {
    width: 670rpx;
    border-radius: 44px;
    margin: 200rpx 40rpx;
    background: #ff8722;
    color: #fff;
    height: 88rpx;
    line-height: 88rpx;
    text-align: center;
}

.codebtn {
    height: 40rpx;
    font-size: 28rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #000;
    line-height: 40rpx;
    color: #999;
    /* background-color: #FFFFFF;
  border-color: #FFFFFF; */
}
</style>
